import React, {Component} from 'react';
import cs from 'classnames';
import BaseCmpt from '../BaseCmpt';
import {Button} from 'antd';
import './index.css';
import Ajax from '../../common/ajax';

class NearShopList extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 111,
            isOnly: true,
            style: {},
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            list: []
        };
        this._fetch = this._fetch.bind(this);
    }

    componentDidMount() {
        this._fetch();
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {dataset, style, list = []} = data;
        var list = this.state.list || [];

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'nearShopList cmptEle': true, 'cmptEle_selected': selected})}
                style={style}
            >
                <div className="nearShopList__map">这里是地图</div>
                <div className="nearShopList__content">
                    <div className="nearShopList__title">附近门店</div>
                    <div className="nearShopList__list">
                        {
                            list.map(function (item) {
                                return (
                                    <div className="nearShopItem" key={item.id}>
                                        <div className="nearShopItem__titleWrap">
                                            <div className="nearShopItem__title">{item.title}</div>
                                            <div className="nearShopItem__phone">{item.contact}</div>
                                        </div>
                                        <div className="nearShopItem__km">{item.juli}</div>
                                        <div className="nearShopItem__opts">
                                            <Button size="small" type="primary">立即导航</Button>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        );
    }

    _fetch() {
        var _self = this;
        _self._getNearShop();
    }

    _getNearShop(lat, lng) {
        var _self = this;

        Ajax.G('/openapi/CHome/nearbyStoresList', {
            page: 1,
            lat,
            lng
        }, function (res) {
            var data = res['result'];
            var list = data.nearbyStoresList || [];

            list = list.map(function (item) {
                if (item.juli <= 100) {
                    item.juli = '100米以内';
                } else if (item.juli <= 1000) {
                    item.juli = item.juli + ' m';
                } else {
                    item.juli = (parseFloat(item.juli) / 1000).toFixed(2) + ' km';
                }
                return item;
            });

            _self.setState({
                list
            });
        });
    }
}

export default NearShopList;
